<template>
  <div class="question" v-if="index !== -1">
    {{ index + 1 }}.
    <span class="label label-rounded bg-primary">
      <!-- 题目类型 -->
      {{ item.questionTypeName }}
    </span>
    <span class="label label-rounded label-secondary">
      <!-- 章节名称 -->
      {{ item.courseLineNumber }}
    </span>
    <span v-show="is_show_answer_tip" class="label label-rounded bg-success">
      <!-- 题目答案，在背题模式下显示 -->
      {{ item.answer }}
    </span>
    <!-- 题目描述 -->
    <div class="stem">
      {{ stem_filter(item.questionStem) }}
    </div>
    <!-- 单选题 -->
    <div v-if="item.questionType === 'radio'">
      <div class="choices" v-for="choice, j in item.options" :key="item.questionId + j">
        <label class="form-radio">
          <input type="radio" :name="'radio-' + item.questionId" :value="choice.option" v-model="user_answer[index]"
            :disabled="curr_status === 'recite'" />
          <i class="form-icon"></i>
          {{ choice.option }}. {{ choice.content }}
        </label>
      </div>
    </div>
    <!-- 多选题 -->
    <div v-else-if="item.questionType === 'checkbox'">
      <div class="choices" v-for="choice, j in item.options" :key="item.questionId + j">
        <label class="form-checkbox">
          <input type="checkbox" :name="'checkbox-' + item.questionId" :value="choice.option"
            :disabled="curr_status === 'recite'" v-model="user_answer[index]" />
          <i class="form-icon"></i>
          {{ choice.option }}. {{ choice.content }}
        </label>
      </div>
    </div>
    <!-- 填空题 -->
    <div v-else-if="item.questionType === 'fillblank'">
      <div class="choices" v-for="choice, j in item.options" :key="item.questionId + j">
        <label>
          <input class="form-input" type="text" :name="'fillblank-' + item.questionId" :placeholder="choice.option"
            v-model="user_answer[index][j]" :readonly="curr_status === 'recite'" />
        </label>
      </div>
    </div>
    <!-- 判断题 -->
    <div v-else>
      <div class="choices" v-for="choice, j in item.options" :key="item.questionId + j">
        <label class="form-radio">
          <input type="radio" :name="'radio-' + item.questionId" :value="choice.option" v-model="user_answer[index]"
            :disabled="curr_status === 'recite'" />
          <i class="form-icon"></i>
          {{ choice.option }}
        </label>
      </div>
    </div>
    <div v-if="curr_status !== 'recite' && ques_status[index] !== null">
      <div class="answer-box" v-if="ques_status[index]">
        <span class="label label-rounded label-success">回答正确</span>
      </div>
      <div class="answer-box" v-else>
        <span class="label label-rounded label-error">回答错误</span>
        <p v-if="item.questionType === 'radio' || item === 'checkbox'">
          正确答案：<span class="label label-error can-select">{{ item.answer }}</span>
        </p>
        <div v-else-if="item.questionType === 'fillblank'">
          <p v-for="choice, j in item.options">
            {{ choice.option }}：
            <span class="label can-select"
              :class="choice.content === user_answer[index][j] ? 'bg-success' : 'bg-error'">
              {{ choice.content }}
            </span>
          </p>
        </div>
        <p v-else>
          正确答案：<span class="label label-primary">{{ item.answer }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Question',
  mounted() {
    console.log('Question mounted')
  },
  computed: {
    ...mapState([
      'is_dark',
      'questions',
      'index',
      'curr_status',
      'user_answer',
      'ques_status'
    ]),
    item() {
      return this.questions[this.index]
    },
    /**
     * 是否显示答案 Label
     */
    is_show_answer_tip() {
      // (this.curr_status === 'practice' && this.ques_status[this.index] !== null)
      return this.item.questionType !== 'fillblank' && this.curr_status === 'recite'
    }
  },
  methods: {
    /**
     * 过滤不合法字符
     * @param {String} stem
     * @returns {String}
     */
    stem_filter(stem) {
      return stem
        .replace(/(（|\()(\u3000| )*(）|\))/g, " （\u3000）")
        .replace(',', '，')
    }
  }
}
</script>

<style scoped>
.answer-box {
  margin-top: 18px;
  margin-bottom: 12px;
}

.stem {
  word-wrap: break-word;
}

.can-select {
  user-select: initial;
}
</style>